<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <iframe src="http://127.0.0.1:3000/server5" frameborder="0" style="display:none"></iframe>
    <button id='btn'>按钮</button>

    <script>
        //  <!-- anywhere与 http-servr区别 anywhere启动默认后台跨域解决Access-Control-Allow-Origin: * -->
        // window.onload = function () {
        //     $.ajax({
        //         //   http://192.168.2.115:8080
        //         //   http://127.0.0.1:8080
        //         url: 'http://192.168.2.115:8080/json.json',
        //         //anywhere
        //         // https://192.168.2.115:8001/
        //         // http://192.168.2.115:8000
        //         method: 'get',
        //         success: res => {
        //             console.log(res)
        //         }
        //     })
        // }


        // 第一种后台跨域处理好 前端无需处理
        // window.onload = function () {
        //     $.ajax({
        //         url: 'http://127.0.0.1:3000/server',
        //         method: 'get',
        //         success: res => {
        //             console.log(res)
        //         }
        //     })
        // }

        /*jsonp原理 第二种*/
        // function Fn(val) {
        //     console.log(val)
        // }
        // let _url = 'http://127.0.0.1:3000/server3?callback=Fn'
        // let _script = document.createElement('script')
        // _script.setAttribute('src', _url)
        // _script.setAttribute('type', 'text/javascript')
        // document.getElementsByTagName('body')[0].append(_script)


        /*使用jsonp 第三种*/
        // window.onload = function () {
        //     $.ajax({
        //         url: 'http://127.0.0.1:3000/server3',
        //         method: 'get',
        //         dataType: 'jsonp',
        //         success: res => {
        //             console.log(res)
        //         }
        //     })
        // }

        //通过代理 第四种
        // window.onload = function () {
        //     $.ajax({
        //         url: '/test',
        //         method: 'get',
        //         success: res => {
        //             console.log(res)
        //         }
        //     })
        // }


        //第五种nginx代理
        // window.onload = function () {
        //     $.ajax({
        //         url: 'http://localhost/api',
        //         method: 'get',
        //         success: res => {
        //             console.log(res)
        //         }
        //     })
        // }
        // nginx配置
        // server {
        // location / api {
        // proxy_pass http: //127.0.0.1:3000/server5;
        // }
        // }


        btn.onclick = function () {
            window.onmessage = function (ev) {
                console.log(ev)
            }
        }




    </script>
</body>

</html>